<template>
	<view class="appointment">
		<!-- 顶部导航栏 -->
		<view class="box-title">
			<view class="back_pages" :style="'position: fixed; left: 30rpx; top:'+ titleHeight +'rpx;'" @click="backPage">
				<u-icon size="35" name="arrow-leftward"></u-icon>
			</view>
			<view class="title-text">
				订单详情
			</view>
			<view class="title-status-box" style="margin-top: 60rpx;">
				<view class="order-status">
					{{orderData.status == '1'?'待配送':(orderData.status == '2'?'配送中':(orderData.status == '3'?'已完成':'已失效'))}}
				</view>
			</view>
			<view class="show-number-text">
				园内配送，极速送达
			</view>
		</view>
		
		
		
		<!-- 到店服务 -->
		<view class="card-shop-box">
			<view class="shop-name-title">
				<view class="icon-text-info" >
					配送
				</view>
				<view class="shop-name-text" @click="goShopPage">
					{{orderData.detailList[0].shop.shopName}} >
				</view>
			</view>
			<view class="card-column" style="margin-top: 20rpx;">
				收货人：{{orderData.receiverName}}
			</view>
			<view class="card-column" >
				联系手机号：{{orderData.receiverPhone}}
			</view>
			<view style="width: 100%; height: 10rpx; background: #FFFFFF; border-radius: 10rpx; margin: 20rpx 0;"></view>
			<view class="card-column" >
				服务店铺：{{orderData.detailList[0].shop.shopName}}
			</view>
			<view class="card-column" >
				店铺电话：{{shopPhone.answer}}
			</view>
			<view class="card-column" >
				配送员姓名：{{orderData.courierName || "待派遣"}}
			</view>
			<view class="card-column" >
				配送员电话：{{orderData.courierPhone || "待派遣"}}
			</view>
			<view class="card-column">
				店铺地址：{{orderData.detailList[0].shop.receiveAddress}}
			</view>
			<view style="width: 100%; height: 10rpx; background: #FFFFFF; border-radius: 10rpx; margin: 20rpx 0;"></view>
			<view class="card-column" >
				支付时间：{{orderData.paymentTime}}
			</view>
			<view class="card-column">
				支付类型：{{orderData.payType == '1'?'支付宝':(orderData.payType == '2'?'微信':(orderData.payType == '3'?'银联':'货到付款'))}}
			</view>

			
			<!-- 3个按钮排列 -->
			<view class="row-capsule" v-if="false">
				<view class="show-text-capsule"  @click="showCode" v-if="showStatus == true && orderInfoMap.subscribeState == '0'">
					出示核销码
				</view>
				<view class="show-text-capsule" style="margin: 0 10rpx;">
					去导航
				</view>
				<view class="show-text-capsule" style="color: #D2B48C;">
					联系TA
				</view>
			</view>
		</view>
		
		<!-- 订单号相关 -->
		<view v-if="false" class="card-shop-box" style="margin-top: 20rpx;">
			<!-- 店铺 -->
			<view class="shop-name-title">
				<view class="icon-text-info">
					优
				</view>
				<view class="shop-name-text" @click="goShopPage">
					{{orderInfoMap.storeName}}
				</view>
				<view class="shop-order-info" style="color: #000000;" @click="goShopPage">
					>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address-info">
				{{orderInfoMap.address}} | {{location}}km
			</view>
			
			<!-- 订单详情 -->
			<view class="shop-body-info" style="margin-top: 10rpx;">
				<view class="card-body-image">
					<image :src="orderInfoMap.skuDefaultImg" mode="scaleToFill" style="width: 120rpx; height: 120rpx; border-radius: 10rpx;"></image>
				</view>
				<view class="order-info-text" style="margin-left: 20rpx; margin-right: 50rpx;">
					<view style="font-size: 24rpx; font-weight: 500;">
						{{orderInfoMap.skuName}}
					</view>
					<view style="font-size: 22rpx; margin-top: 10rpx;">
						{{orderInfoMap.skuDesc == null?'无介绍描述':orderInfoMap.skuDesc}}
					</view>
				</view>
				<view class="card-money-box">
					<view style="font-size: 24rpx; font-weight: bold;">
						￥{{orderInfoMap.projectMoney}}
					</view>
					<view style="font-size: 22rpx;">
						x {{orderInfoMap.amount}}
					</view>
					<!-- <view class="return-buttom">
						申请退款
					</view> -->
				</view>
			</view>
			<!-- 商品总价 -->
			<view class="shop-total-money">
				<view style="display: flex; justify-content: space-between;">
					<view class="">
						商品总价
					</view>
					<view>
						￥{{orderInfoMap.projectMoney * orderInfoMap.amount}}
					</view>
				</view>
			</view>
			<!-- 拨打电话在线咨询 -->
			<view class="callor-consult">
				<view class="consult-box" style="display: flex; flex-grow: 1; justify-content: center; align-items: flex-end;">
					<u-icon name="server-man" style="margin-right: 15rpx;"></u-icon>
					在线咨询
				</view>
				<view class="call-box" style="display: flex; flex-grow: 1; justify-content: center; align-items: flex-end;">
					<u-icon name="phone-fill" style="margin-right: 15rpx;"></u-icon>
					拨打电话
				</view>
			</view>
		</view>
		
		<!-- 弹出劵码：二维码 -->
		<view class="show-code-box" v-if="show" @click="hideCode">	
			<view class="image-title">
				<image src="../../../static/image/poster.png" mode="scaleToFill" style="width: 120rpx; height: 120rpx;"></image>
			</view>
			<view class="code-image" >
				<uqrcode ref="uQRCode" mode="canvas" size="200" :text="textCode" />
				<view style="margin-top: 20rpx; color: #000000; font-size: 28rpx; font-weight: 500;">
					请在服务完成后让手艺人扫码
				</view>
				<button class="save-image-code" @click.stop="saveImage">保存图片</button>
			</view>
			<!-- <u-icon name="close-circle" color="#FFFFFF" size="56" style="margin-top: 20rpx;"></u-icon> -->
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		data() {
			return {
				show: false,
				// 店铺电话
				shopPhone: {
					answer: null,
					inform: null
				},
				// 手机胶囊高度
				titleHeight: '',
				// 手艺人信息
				serviceName: {},
				// 订单详情
				orderInfoMap: {},
				// 距离店铺 kn
				location: 0,
				textCode: '',
				orderStatus: 0,
				showStatus: true,
				// 订单信息
				orderData: null,
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(e) {
			const that = this
			// 订单状态
			this.getOrderInfo(e.orderId)
		},
		onShow() {
			this.getPhoneHeightStatus()
		},
		methods:{
			// 获取店家手机号和配送员电话
			getShopPhone(shopId){
				this.$api.request.getShopPhone({
					shopId: shopId
				}, res => {
					if(res.code == 200){
						this.shopPhone = res.data
					}
				})
			},
			// 获取订单详情
			getOrderInfo(id) {
				this.$api.request.getOrderDetailInfo({
					orderId: id
				}, res => {
				    console.log(res);
					this.orderData = res.data
					this.getShopPhone(res.data.shopId)
				});
			},
			// 获取技师姓名
			getServiceName(id){
				const that = this
				that.$api.request.getServiceName({
					id: id
				}, res => {
					if(res.code == 200){
						console.log(res);
						that.serviceName = res.data
					}
				})
			},
			
			// 手机号隐藏
			phoneHide(phone){
				return phone.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2");
			},
			
			// 码若是已核销则刷新状态
			hideCode(){
				this.show = false
				const that = this
				this.$api.request.getOrderStatus({
					orderId: that.orderInfoMap.orderId
				}, res => {
					if(res.code == 200){
						that.orderStatus = res.data.status
					}
				})
				this.$api.request.orderByInfoData({
					wxId: uni.getStorageSync('openId'),
					orderId: that.orderInfoMap.orderId
				}, res => {
					if(res.code == 200){
						if(res.data.length > 0){
							that.orderInfoMap = res.data[0]
						}
					}
				})
			},
			
			/**
			 * 获取手机状态栏高度
			 */
			getPhoneHeightStatus() {
				let systemInfo = uni.getSystemInfoSync();
				let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
				let fontSize = systemInfo.fontSizeSetting * pxToRpxScale; // 用户设置的字体大小
				let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
				let titleHeight = statuHeight + (48 - 32) / 2; //导航栏高度，这个一般是固定的
				console.log(titleHeight);
				this.titleHeight = titleHeight
			},
			// 返回
			backPage() {
				uni.navigateBack()
			},
			// 进入店铺
			goShopPage(){
				// uni.navigateTo({
				// 	url: '/pages/sys/home/store?id=' + this.orderInfoMap.shopId
				// })
			},
			// 查看劵码
			showCode(){
				this.textCode = this.orderInfoMap.checkoutCode
				this.show = true
			},
			// 保存图片
			saveImage(){
				console.log("点击了保存");
				const that = this
				that.$refs.uQRCode.save()
				
			},
			/**根据经纬度计算距离
			 * @param {Object} lat1
			 * @param {Object} lng1
			 * @param {Object} lat2
			 * @param {Object} lng2
			 */
			getDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI/180.0;
				var radLat2 = lat2 * Math.PI/180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI/180.0) - (lng2 * Math.PI/180.0)
				var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
				s = s*6378.137;
				s = Math.round(s*10000)/10000;
				
				var distance = s;
				var distance_str = "";
				
				if(parseInt(distance) >=1){
					distance_str = distance.toFixed(1) + "km";
				}else{
					distance_str = distance * 1000 + "m"
				}
				console.log("距离是：" + s);
				console.log("距离是：" + distance_str);
				return s.toFixed(2);
			}
		}
	}
</script>

<style>
	.appointment{
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		min-height: 100vh; 
	}
	.box-title{
		width: 100vw;
		height: 300rpx;
		background: #D2B48C;
		display: flex;
		flex-direction: column;
	}
	.title-text{
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		margin-top: 5vh;
	}
	.back_pages {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
	}
	.title-status-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	.order-status{
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.show-appointment{
		width: 160rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #D2B48C;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.show-number-text{
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
		margin-top: 15rpx;
	}
	.card-shop-box{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 40rpx 30rpx;
	}
	.shop-name-title{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.icon-text-info{
		width: 60rpx;
		border: 1rpx solid #D2B48C;
		border-radius: 5rpx;
		font-size: 22rpx;
		display: flex;
	    justify-content: center;
		color: #D2B48C;
	}
	.shop-name-text{
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.shop-order-info{
		color: #D2B48C;
		font-size: 22rpx;
		margin-left: auto;
		margin-right: 0;
	}
	.card-column{
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
	.row-capsule{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.show-text-capsule{
		width: auto;
		height: 50rpx;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 500;
		border: 1rpx solid #F6F6F6;
		border-radius: 20rpx;
	}
	.address-info{
		font-size: 22rpx;
		color: #696969;
		margin-top: 10rpx;
	}
	.shop-body-info{
		width: 100vw;
		display: flex;
		flex-direction: row;
	}
	.card-body-image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}
	.order-info-text{
		width: calc(100vw - 375rpx);
		display: flex;
		flex-direction: column;
	}
	.card-money-box{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.return-buttom{
		width: auto;
		height: 30rpx;
		border: 1rpx solid #F5F5F5;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		margin-top: 30rpx;
	}
	.shop-total-money{
		width: 100%;
		font-size: 22rpx;
		margin-top: 20rpx;
	}
	.callor-consult{
		width: calc(100vw - 60rpx);
		height: 60rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		border-top: 1rpx solid #F5F5F5;
		display: flex;
		flex-direction: row;
	}
	
	.show-code-box{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: rgb(0,0,0,0.6);
		z-index: 99;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.code-image{
		width: 560rpx;
		height: 800rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		border: 3rpx solid #696969;		
		z-index: 9999 !important;
	}
	
	.image-title{
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		border: 6rpx solid #696969;
		position: relative;
		bottom: -60rpx;
		background: #fa3534;
		z-index: 99999;
	}
	
	.save-image-code{
		width: 84%;
		height: 80rpx;
		font-size: 28rpx;
		background: #fa3534;
		color: #FFFFFF;
		margin-top: 40rpx;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
